<template>
  <div>
    <h1>composition Api ： https://vue3js.cn/vue-composition-api/</h1>
    {{ count }}
    <button @click="add">加1</button>
    <br />
    {{ obj.msg }}
    <button @click="changeObj">改变msg</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
export default defineComponent({
  setup () { // 类似于React 的Hooks
    const count = ref(100) // 定义count变量，初始值为100
    const add = (): void => { // 定义了修改count的函数，
      console.log(count) // 因为初始值是通过ref创建的，需要通过value属性获取值和设置值
      count.value += 1
    }

    const obj = reactive({ // 如果初始值的数据类型为 对象，使用reactive 方法
      msg: 'hello world'
    })
    const changeObj = () => {
      obj.msg = '您好世界'
    }
    return {
      count,
      add,
      obj,
      changeObj
    }
  }
})
</script>
